<!--  
Exception:要情管理
  -->
<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="上报单位:">
              <dg-tree-drop
                v-model="sbrdwCode"
                :code="BM_DEPT"
                :check-strictly="true"
                :props="props"
                lazy-load
                filterable
                clearable
                value-name="value"
                label-name="label"
                style="width: 100%"
                multiple
                collapse-tags
                :cacheable="true"
              ></dg-tree-drop>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="上报时间:">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="信息状态:">
              <dg-select v-model="condition.xxzt.value" :data="constant.BM_QSZT" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="信息类别:">
              <dg-tree-drop
                v-model="xxlb"
                :code="BM_XXLB"
                :check-strictly="true"
                :props="props"
                lazy-load
                filterable
                clearable
                value-name="value"
                label-name="label"
                style="width: 100%"
                multiple
                collapse-tags
                :cacheable="true"
              ></dg-tree-drop>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="关键词:">
              <el-input
                v-model="condition.keyword.value"
                placeholder="标题、正文、姓名、身份证号、联系电话"
                clearable
                :maxLength="50"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <div class="table">
        <el-tabs v-model="activeTab" @tab-click="onTabChange">
          <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${tab.label}(${tab.num})`" :name="tab.name" />
        </el-tabs>
        <el-button
          type="primary"
          v-permission="['XXXX_SUBMIT']"
          size="mini"
          @click="() => $router.push({ name: 'AddImp' })"
          >上报</el-button
        >
        <comm-table
          ref="table"
          :condition="condition"
          :columns="columns"
          url="/v1/flowMain/search"
          v-if="condition.labelType.value"
          :default-sort="{ prop: 'sendTime', order: 'descending' }"
        >
          <template slot-scope="{ row }">
            <div v-if="['1', '2', '3', '0'].includes(activeTab)">
              <el-button
                v-permission="['XXXX_QS']"
                type="text"
                :disabled="row.xxzt === '1'"
                @click="() => $router.push({ name: 'ImpSign', params: { id: row.id } })"
              >
                签收
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                v-permission="['XXXX_ZL']"
                :disabled="row.xxzt === '0'"
                @click="() => $router.push({ name: 'ImpOrder', params: { id: row.id, zlly: '1', isEcho: true } })"
                >指令</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button
                v-permission="['XXXX_CP']"
                type="text"
                :disabled="row.xxzt === '0'"
                @click="() => $router.push({ name: 'ImpApproval', params: { id: row.id, cbyj: row.cbyj } })"
              >
                呈批
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                v-permission="['XXXX_BL']"
                type="text"
                :disabled="row.xxzt === '0'"
                @click="() => $router.push({ name: 'ImpSupplement', params: { id: row.id } })"
                >补录</el-button
              >
              <!-- <el-divider direction="vertical"></el-divider> -->
              <!-- <el-button v-permission="['XXXX_PRINT']" type="text" @click="deleteRow(row)">打印</el-button> -->

              <!-- 快速上报（isKssb：1）  TODO:21号需求，暂时隐藏 
                与后端沟通：修改控制权限v-permission="['XXXX_KSSB']"、id用的是id还是flowId
                与需求沟通：能否多次上报？与签收是否有关联
                -->
              <el-divider direction="vertical"></el-divider>
               <el-button
                v-permission="['XXXX_BL']"
                type="text"
                @click="() => $router.push({ name:'ImportIntelReport', params: { id: row.id,isKssb:1} })"
                >快速上报</el-button
              > 
              <el-divider direction="vertical" v-permission="['XXXX_PRINT']"></el-divider>
              <el-button type="text" v-permission="['XXXX_PRINT']" @click="openPrintPage(row)">打印</el-button>
            </div>
            <div v-else>
              <el-button v-permission="['XXXX_SUBMIT']" type="text" v-if="activeTab === '5'" @click="onReport(row)">
                上报
              </el-button>
              <el-divider direction="vertical" v-if="activeTab === '5'"></el-divider>
              <el-button
                v-permission="['XXXX_EDIT']"
                type="text"
                :disabled="row.xxzt === '1'"
                @click="() => $router.push({ name: 'EditImp', params: { id: row.id } })"
              >
                编辑
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button v-permission="['XXXX_DELETE']" :disabled="row.xxzt === '1'" type="text" @click="deleteRow(row)"
                >删除</el-button
              >
              <el-divider direction="vertical" v-permission="['XXXX_PRINT']"></el-divider>
              <el-button type="text" @click="openPrintPage(row)" v-permission="['XXXX_PRINT']">打印</el-button>
            </div>
          </template>
        </comm-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import {deleteProcess, sendGrag, getProTabNums, printYaxx} from '@/api/common';
import { deepClone, value2Level } from '@/utils/common';
import { BM_DEPT, BM_XXLB } from '@/common/codeDic';
import tabPermission from '@/mixin/tabPermission';
import constant from '@/store/modules/constant';
const QS_STATUS = (_this) => {
  return {
    label: '签收状态',
    width: 200,
    // 勿删，标签切换时判断是否显示签收状态和反馈状态
    prop: 'qszt',
    render: (h, row) => {
      return h('div', { class: 'v-link' }, [
        h('span', {}, `签收情况:${row.qsDone || 0}/${row.qsAll || 0};`),
        h(
          'span',
          {
            on: {
              click() {
                _this.openSignModal(row);
              }
            }
          },
          '更多>'
        )
      ]);
    }
  };
};
const FK_STATUS = (_this) => {
  return {
    label: '反馈状态',
    width: 200,
    render: (h, row) => {
      return h('div', { class: 'v-link' }, [
        h('span', {}, `反馈情况:${row.fkDone || 0}/${row.fkAll || 0};`),
        h(
          'span',
          {
            on: {
              click() {
                _this.openFeedbackModal(row);
              }
            }
          },
          '更多>'
        )
      ]);
    }
  };
};
export default {
  name: 'ImpManageHome',
  mixins: [tabPermission],
  data() {
    return {
      BM_DEPT,
      BM_XXLB,
      sbrdwCode: [],
      xxlb: [],
      activeTab: '',
      tabs: [],
      // 列表查询条件
      condition: {
        sourceType: {
          value: '1',
          op: '='
        },
        labelType: {
          value: '',
          op: '='
        },
        sbrdwCode: {
          value: '',
          op: '='
        },
        xxlb_code: {
          value: '',
          op: '='
        },
        xxzt: {
          value: '',
          op: '='
        },
        keyword: {
          value: '',
          op: 'like'
        },
        startTime: {
          value: '',
          op: '='
        },
        endTime: {
          value: '',
          op: '='
        }
      },
      cloneCondition: null,
      time: '',
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        {
          label: '紧急程度',
          render: (h, row) =>
            h('div', { class: `urgentLevel urgentLevel${row.jjcd}` }, [
              h('span', {}, row.jjcd == '1' ? '一级' : row.jjcd == '2' ? '二级' : row.jjcd == '3' ? '三级' : '-') // 判空
            ]),
          width: 120
        },
        { label: '上报时间', prop: 'sendTime', width: 180 },
        {
          label: '信息状态',
          width: 120,
          render: (h, row) =>
            h(
              'div',
              { style: { color: row.xxzt === '0' ? '#f5212d' : '#67c23a' } },
              row.xxzt === '0' ? '未签收' : '已签收'
            )
        },
        { label: '编号', prop: 'serialNo' },
        {
          label: '标题',
          width: 200,
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            const tagDeal = (lead) =>
              h(
                'el-tag',
                {
                  attrs: {
                    type: 'danger',
                    effect: 'plain',
                    size: 'mini'
                  }
                },
                `${lead}关注`
              );
            return h(
              'div',
              {
                class: 'table-title yq-list-wrap',
                on: {
                  click() {
                    _this.$router.push({ name: 'ImpDetail', params: { id: row.id } });
                  }
                }
              },
              [
                h('div', { class: 'v-link' }, row.title),
                row.isLdgz === '1' && tagDeal('其他领导'),
                row.isJldgz === '1' && tagDeal('局领导')
              ]
            );
          }
        },
        {
          label: '信息类型',
          prop: 'xxlbName',
          width: 100,
          render: (h, row) => {
            const value = value2Level(this.constant.BM_XXLB, row.xxlbCode);
            return h('span', {}, value[value.length - 1]);
          }
        },
        { label: '签收人', prop: 'qsrName' },
        { label: '上报单位', prop: 'sbrdwCode', width: 120, code: BM_DEPT },
        { label: '上报人', prop: 'sbrName' },
        { label: '操作', type: 'operate', fixed: 'right' }
      ],
      props: {
        value: 'value'
      }
    };
  },
  watch: {
    sbrdwCode(val) {
      this.condition.sbrdwCode.value = val.length ? val : '';
    },
    xxlb(val) {
      this.condition.xxlb_code.value = val.length ? val : '';
    },
    time(val) {
      this.condition.startTime.value = val ? val[0] : '';
      this.condition.endTime.value = val ? val[1] : '';
    },
    activeTab: {
      deep: true,
      immediate: true,
      handler(val) {
        if (['1', '2', '3', '0'].includes(val)) {
          this.columns[this.columns.length - 1].width = 240;
          if (this.columns.length === 11) {
            this.columns.splice(6, 0, QS_STATUS(this), FK_STATUS(this));
          }
        } else {
          this.columns[this.columns.length - 1].width = val === '5' ? 180 : 120;
          if (this.columns.length === 13) {
            this.columns.splice(6, 2);
          }
        }
        this.init();
      }
    }
  },
  computed: {
    ...mapState(['constant'])
  },
  activated() {
    this.init();
    this.$refs.table.reload();
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_QSZT']);
    this.$store.dispatch('getConstantTree', ['BM_XXLB', 'BM_DEPT']);
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    init() {
      getProTabNums('1').then(({ data }) => {
        Object.keys(data).forEach((item) => {
          // const tab = this.tabs.find((child) => child.num_key === item);
          // if (tab) {
          //   tab.num = data[item];
          // };

          // 更新tab页签数据
          if (this.tabs.length) {
            let tab = JSON.parse(JSON.stringify(this.tabs));
            this.tabs.forEach((child, index) => {
              if (child.num_key === item) {
                tab[index].num = data[item];
              }
            });
            this.$set(this, 'tabs', tab);
          }
        });
      });
    },
    /**
     * 编辑新增外部来文
     */
    edit(row) {
      console.log(row);
    },
    /**
     * 删除列表数据
     */
    deleteRow({ id }) {
      this.$confirm('确认删除此数据?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        deleteProcess(id)
          .then(() => {
            this.$refs.table.searchForm();
            // 刷新tab页签总数
            this.init();
            this.$message.success('删除成功');
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
            this.$message.warning('删除失败');
          });
      });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.sbrdwCode = [];
      this.condition = { ...deepClone(this.cloneCondition), labelType: this.condition.labelType };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 打开签收状态弹框
     */
    openSignModal(row) {
      this.$dgLayer({
        title: '签收状态',
        props: {
          id: row.id
        },
        component: require('../components/SignModal'),
        area: ['60%', '480px']
      });
    },
    /**
     * 打开反馈状态弹框
     */
    openFeedbackModal(row) {
      this.$dgLayer({
        title: '反馈状态',
        props: {
          id: row.id
        },
        component: require('../components/FeedbackModal'),
        area: ['60%', '480px']
      });
    },
    /**
     * 切换标签
     */
    onTabChange(tab) {
      this.condition.labelType.value = this.tabs[parseInt(tab.index)].name;
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 上报
     */
    onReport(row) {
      this.$confirm('确认上报?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '上报中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        sendGrag(row.id)
          .then(() => {
            this.$message.success('上报成功');
            loadingInstance.close();
            this.$refs.table.searchForm();
          })
          .catch(() => {
            loadingInstance.close();
            this.$message.warning('上报失败');
          });
      });
    },
    /**
     * 打印
     */
    openPrintPage(row){
      let doc_name = '公安要情呈报单';
      let doc_id = row.id;
      let type = '1';
      printYaxx(doc_id, doc_name, type);
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 20px;
    button {
      margin-bottom: 10px;
    }
  }
}
</style>
